<!-- <template>
  <NavigationBar />
  <div class="customer-service">
    <h1>客服中心</h1>
    <div class="chat-container">
      <div class="chat-messages" ref="chatMessages">
        <div v-for="message in messages" :key="message.id" class="message">
          <div :class="['message-content', message.from === 'user' ? 'user' : 'agent']">
            {{ message.text }}
          </div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
        <button @click="sendMessage">发送</button>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';

export default {
  name: 'CustomerService',
  components: {
    NavigationBar,
    Footer
  },
  data() {
    return {
      messages: [
        { id: 1, from: 'agent', text: '您好，很高兴为您服务！' },
      ],
      newMessage: '',
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        const newMessage = {
          id: Date.now(),
          from: 'user',
          text: this.newMessage,
        };
        this.messages.push(newMessage);
        this.newMessage = '';
        this.scrollToBottom();
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatMessages = this.$refs.chatMessages;
        chatMessages.scrollTop = chatMessages.scrollHeight;
      });
    },
  },
  mounted() {
    this.scrollToBottom();
  },
};
</script>
 -->
